<template>
	<div class="order padding20">
		<el-tabs v-model="search.orderStatus" @tab-click="onTabChange">
			<el-tab-pane name="0" label="全部"></el-tab-pane>
			<el-tab-pane :name="item.code" :label="item.name" v-for="(item, index) in status" :key="index"></el-tab-pane>
		</el-tabs>
		<div class="search">
			<el-form inline>
				<el-form-item label="下单时间">
					<el-date-picker
						v-model="date"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-DD HH:mm:ss"
						@change="onSearch"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="订单号">
					<el-input v-model="search.orderNumber" clearable placeholder="请输入订单号"></el-input>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="search.payType" placeholder="请选择支付方式">
						<el-option v-for="(item, index) in OrderPayType" :key="index" :label="item.name" :value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
					<el-button size="medium" icon="el-icon-download" type="warning">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="table-header table">
			<span class="checked">
				<el-checkbox style="margin-bottom: 0;" v-model="isCheckAll"></el-checkbox>
			</span>
			<span class="main-content">商品信息</span>
			<span class="number">价格/数量</span>
			<span class="pay-type">支付</span>
			<span class="delivery">配送</span>
			<span class="buyer">买家</span>
			<span class="handler">操作</span>
			<span class="status">状态</span>
		</div>
		<div class="table-body table" v-for="(item, index) in tableData" :key="item.id">
			<div class="header">
				<span class="checked">
					<el-checkbox
						style="margin-bottom: 0;"
						:value="checkedIds.includes(item.id)"
						@change="onTableCheckChange($event, item)"
					></el-checkbox>
				</span>
				<span class="main-content">
					订单编号: {{ item.orderNumber }}
					<fortress-copy :copy-data="item.orderNumber"></fortress-copy>
					下单时间: {{ item.createTime }}
				</span>
			</div>
			<div class="body">
				<span class="main-content">
					<div v-if="item.goodsList[0]">
						<el-image class="el-image" fit="cover" :src="item.goodsList[0].goodsImg" :preview-src-list="[]"></el-image>
						<div class="name">
							{{ item.goodsList[0].goodsName }}
						</div>
						<el-button size="mini" type="primary" plain>{{ formatDict(item.channel, "channel") || "未知" }}</el-button>
					</div>
					<el-tag style="line-height: 1;height: 30px;margin-top: 10px;" type="default" v-if="item.goodsList.length > 1">
						剩余 {{ item.goodsList.length - 1 }} 种商品
					</el-tag>
				</span>
				<span class="number">
					<template>
						<p>￥ {{ item.goodsList[0].goodsRealPrice }}</p>
						<p>x {{ item.goodsList[0].goodsCount }}</p>
						<p>共: ￥{{ item.price }}</p>
					</template>
				</span>
				<span class="pay-type">
					<div>
						<img src="./img/余额支付.png" alt="" class="icon" v-if="item.payType == 1" />
						<img src="./img/货到付款.png" alt="" class="icon" v-else-if="item.payType == 2" />
						<img src="./img/后台付款.png" alt="" class="icon" v-else-if="item.payType == 3" />
						<img src="./img/微信支付.png" alt="" class="icon" v-else-if="item.payType == 4" />
						<img src="./img/支付宝付款.png" alt="" class="icon" v-else-if="item.payType == 5" />
						<img src="./img/银联付款.png" alt="" class="icon" v-else-if="item.payType == 6" />
						{{ formatDict(item.payType, "OrderPayType") || "无" }}
					</div>
				</span>
				<span class="delivery">
					{{ formatDict(item.dvyType, "OrderDelivery") || "无" }}
				</span>
				<span class="buyer">
					<p>{{ item.consignee }}</p>
					<p>{{ item.phone }}</p>
				</span>
				<span class="handler">
					<el-button type="text" style="margin: 0;" @click="$router.push('/order/detail?id=' + item.id)">查看详情</el-button>
					<f-logistic ref="fLogisticRef">
						<el-button v-if="item.orderStatus == 4" type="text" style="margin: 0;">物流信息</el-button>
					</f-logistic>
				</span>
				<span class="status">
					<div>
						<el-button type="text" style="color: #54c952;">{{ formatDict(item.orderStatus, "status") }}</el-button>
					</div>
				</span>
			</div>
		</div>
		<img src="./img/em.png" v-if="!tableData.length" alt="" style="display: block; margin: auto; " />

		<fortress-pagination
			:total="total"
			:current-page="current"
			:page-size="size"
			@refreshData="onCurrentSizeChange"
		></fortress-pagination>
	</div>
</template>

<script>
import FortressPagination from "@/components/fortress-pagination.vue"
import FLogistic from "./logistic.vue"
import request from "@/common/request"
import { enumList } from "@/api/public.api.js"

export default {
	name: "order",
	data() {
		return {
			date: [],
			search: {
				orderStatus: "0",
				startTime: "",
				endTime: "",
				orderNumber: "",
				payType: "",
			},
			checkedList: [],
			tableData: [],
			current: 1,
			total: 0,
			size: 10,
			channel: [],
			status: [],
			OrderPayType: [],
			OrderDelivery: [],
		}
	},
	computed: {
		checkedIds() {
			return this.checkedList.map(item => item.id)
		},
		isCheckAll: {
			get() {
				if (this.tableData.length) {
					return this.tableData.every(item => this.checkedIds.includes(item.id))
				}
				return false
			},
			set(value) {
				if (value) {
					this.checkedList = this.tableData
				} else {
					this.checkedList = []
				}
			},
		},
	},
	async created() {
		this.getData()

		try {
			const { code, data, msg } = await enumList("OrderChannel")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.channel = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderStatus")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.status = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderPayType")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.OrderPayType = data
		} catch (error) {}
		try {
			const { code, data, msg } = await enumList("OrderDelivery")
			if (code != 0) {
				this.$message.error(msg)
				return
			}
			this.OrderDelivery = data
		} catch (error) {}
	},
	methods: {
		async getData() {
			try {
				const {
					code,
					data: { records, total },
					msg,
				} = await request("get", "/orders/goodsOrder/page", {
					...this.search,
					current: this.current,
					size: this.size,
					orderStatus: this.search.orderStatus === "0" ? "" : this.search.orderStatus,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.tableData = records
				this.total = total
			} catch (error) {
				this.$msg({
					message: error,
					type: "error",
				})
			}
		},

		onTabChange({ name }) {
			this.search.orderStatus = name
			this.current = 1
			this.getData()
		},
		onSearch() {
			if (this.date.length) {
				this.search.startTime = this.date[0]
				this.search.endTime = this.date[1]
			} else {
				this.search.startTime = ""
				this.search.endTime = ""
			}
			this.current = 1
			this.getData()
		},
		onCurrentSizeChange({ current, page }) {
			this.current = current
			this.size = page
			this.getData()
		},
		onTableCheckChange(event, item) {
			if (event) {
				this.checkedList.push(item)
			} else {
				const index = this.checkedList.findIndex(item => item.id == item.id)
				this.checkedList.splice(index, 1)
			}
		},

		formatDict(value, dictname) {
			const { name } = this[dictname].find(item => item.code == value) || {}
			return name
		},
	},
	components: {
		FortressPagination,
		FLogistic,
	},
}
</script>

<style lang="scss" scoped>
.order {
	--border-color: #efefef;
	.table-header {
		background: #fafafa;
		border-block: 1px solid var(--border-color);
		height: 55px;
		span {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			&.main-content {
				display: block;
				line-height: 53px;
			}
		}
	}
	.table-body {
		border: 1px solid var(--border-color);
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #e6f7fa;
			width: 100%;
			height: 45px;
			border-bottom: 1px solid var(--border-color);
		}
		.body {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			span {
				height: 180px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				&:not(:last-child) {
					border-right: 1px solid var(--border-color);
				}
			}
			.main-content {
				padding: 25px 20px;
				overflow: hidden;
				display: block;
				> div {
					overflow: hidden;
				}
				.el-image {
					float: left;
					margin-right: 20px;
					width: 100px;
					height: 100px;
					border-radius: 10px;
				}
				.name {
					line-height: 1.5;
					font-size: 16px;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-top: 25px;
					margin-bottom: 10px;
				}
			}
			.number {
				text-align: center;
			}
			.pay-type {
				text-align: center;
				img {
					width: 18px;
				}
			}
		}
	}
	.table {
		display: flex;
		justify-content: space-between;
		align-items: center;
		&.table-body {
			display: block;
		}
		.checked {
			flex: none;
			width: 55px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.main-content {
			flex: 1;
		}
		.number {
			width: 160px;
			flex: none;
		}
		.pay-type {
			width: 140px;
			flex: none;
		}
		.delivery {
			width: 120px;
			flex: none;
		}
		.buyer {
			width: 200px;
			flex: none;
		}
		.handler {
			width: 150px;
			flex: none;
		}
		.status {
			width: 220px;
			flex: none;
		}
	}
}
</style>
